<template>
    <div class="wc-vote mint-header-pa">
        <mt-header fixed title="预测冠军">
            <router-link to="/" slot="left">
                <mt-button class="iconfont">&#xe6b8;</mt-button>
            </router-link>
        </mt-header>
        <vue-scroll :pullDownRefresh="false" :pullUpLoad="false" ref="scroll">
            <div class="bg-blue">
                <br>
                <!-- <poprank></poprank> -->
                <!-- <vue-line :isMargin="true"></vue-line> -->
                <hotvote></hotvote>
                <vue-line :isMargin="true"></vue-line>
                <forecase @taotai="_toTaotai" v-if="!dResult"></forecase>
                <div class="btn-wrap" v-else>
                    <mt-button type="danger" plain size="small" class="btn" @click="lookResult">查看结果</mt-button>
                    <mt-button type="danger" plain size="small" class="btn" @click="resetResult">重新开始预测</mt-button>
                </div>
                <!-- <div class="btn-wrap" v-else>
                    <router-link :to="{name: 'voteresult'}" replace>
                        <mt-button type="danger" plain size="small" class="btn">查看预测结果</mt-button>
                    </router-link>
                </div> -->
                <br>
            </div>
        </vue-scroll>
    </div>
</template>
<script>
import hotvote from './components/hotvote'
import poprank from '@/components/poprank'
import forecase from './components/forecast'
import axios from 'axios'
export default {
    components: {
        poprank,
        hotvote,
        forecase
    },
    data () {
        return {
            dResult: true
        }
    },
    created () {
        this.fetchResult();
    },
    methods: {
        _toTaotai () {
            setTimeout(() => {
                this.$refs.scroll.scrollToElement('#vo-forecast-taotai', 400);
            }, 200)
        },
        fetchResult () {
            axios.get('/api/java/predict/getAllPredict?openid='+window.app.openId).then((res) => {
                this.dResult = !!res.data.data;
            })
        },
        lookResult () {
            this.$router.push('voteresult');
        },
        resetResult () {
            this.dResult = false;
        }
    }
}
</script>
<style lang="less" scoped>
    .wc-vote {
        width: 100%;
        height: 100%;
        background-color: #2a3db0;
    }
    .btns {
        display: flex;
        justify-content: center;
    }
    .btn-wrap {
        display: flex;
        clear: both;
        justify-content: center;
        .btn {
            margin: 0 10px;
            border-color: #fff;
            color: #fff;
        }
    }
</style>
